<template>
    <div>
        <el-dialog class="AccountDialogBG" @close="closeWindow" v-model="dialogFlag" width="500" align-center>
            <p class="dialogTittle">注册账号</p>
            <div class="dialogCont">
                <div class="userAdderss">
                    <p>区块链地址:<br>可点击左侧图标重新获取</p>
                    <div>
                        <el-icon  @click="getRegisterId">
                            <HomeFilled />
                        </el-icon>
                        <p>{{ Account.address.value }}</p>
                    </div>
                    <p>*请保存好你的地址，如果丢失请联系管理员</p>
                </div>
                <!-- <el-input v-model="Account.address.value" :prefix-icon="HomeFilled" placeholder="用户地址"></el-input> -->
                <el-input disabled v-model="Account.character.value" :prefix-icon="Avatar" placeholder="用户角色"></el-input>
                <el-input v-model="Account.name.value" :prefix-icon="UserFilled" placeholder="请输入用户名"></el-input>
                <el-input v-model="Account.password.value" :prefix-icon="Lock" placeholder="请输入密码"
                    show-password></el-input>
                <el-input v-model="Account.ensurepassword.value" :prefix-icon="Lock" placeholder="请再次输入密码"
                    show-password></el-input>
                <div class="elbutton">
                    <el-button @click="closeWindow" type="danger">取消</el-button>
                    <el-button @click="createAccount" type="primary">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang='js' name=''>
import { ref, defineModel, watch } from 'vue'
import { HomeFilled, Avatar, UserFilled, Lock } from '@element-plus/icons-vue'
import getRegisterIdAPI from '@/API/login/registerId';
import getRegisterAPI from '@/API/login/register';
import showMessage from '@/utils/showMessage';
import { CheckInput } from '@/hooks/userCheckInput';

const dialogFlag = defineModel()
watch(dialogFlag,(data)=>{data?getRegisterId():null})

const Account = ref({
    address: { value: "", error: "请选取地址" },
    character: { value: "消费者", error: "请选择角色" },
    name: { value: "", error: "请输入用户名" },
    password: { value: "", error: "请输入密码" },
    ensurepassword: { value: "", error: "请再次输入密码" }
})

function createAccount(){
    if(CheckInput(Account.value.name.value,Account.value.name.error)){
        if(CheckInput(Account.value.password.value,Account.value.password.error)){
            if(Account.value.password.value==Account.value.ensurepassword.value){
                getRegister(Account.value.name.value,Account.value.address.value,Account.value.password.value)
            }else{
                showMessage("两次密码不一致")
            }
        }
    }
    
}

function closeWindow(){
    Account.value.name.value=""
    Account.value.password.value=""
    Account.value.ensurepassword.value=""
    dialogFlag.value=false
}

async function getRegisterId(){
    const res = await getRegisterIdAPI()
    console.log(res)
    if(res.data.code==200){
        Account.value.address.value = res.data.data
    }else{
        showMessage("申请地址错误")
        console.log(res)
    }
}
// getRegisterId()

async function getRegister(name,address,password){
    const res = await getRegisterAPI(name,address,password)
    if(res.data.code==200){
        showMessage("注册成功","success")
        closeWindow()
    }else{
        showMessage("注册失败:"+res.data.msg)
    }
}
</script>
<style>
.AccountDialogBG {
    background: var(--ACDialogBG);
}
</style>
<style scoped>
/* 标题 */
.dialogTittle {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--ACDialogTittle);
}

/* 内容框架 */
.dialogCont {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 用户地址 */
/* .userAdderss>*:nth-child(1){
font-size: 14px;
} */
.userAdderss>*:nth-child(2) {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid;
    border-radius: 5px;
    padding: 1px 11px;
    line-height: 30px;
    color: var(--ACDialogImportant);
}
.userAdderss>*:nth-child(2)>p{
    background: #8585850a;
    padding: 0px 10px;
    min-height: 20px;
}

.userAdderss>*:nth-child(3) {
    color: red;
    font-size: 12px;
}

.elbutton {
    display: flex;
}

.elbutton>* {
    flex: 1;
}
</style>